<div class="toast-container position-fixed p-3 start-50 translate-middle-x">
  <% if notice.present? %>
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-body d-flex align-items-center gap-2">
        <%= render_icon "check", class: "flex-shrink-0 text-success" %>
        <div class="flex-fill"><%= notice %></div>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
    </div>
  <% end %>
  <% if alert.present? %>
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-body d-flex align-items-center gap-2">
        <%= render_icon "exclamation", class: "flex-shrink-0 text-danger" %>
        <div class="flex-fill"><%= alert %></div>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
    </div>
  <% end %>
</div>
